const titleConfig = {
    'ql-bold':'加粗',
    'ql-color':'字体颜色',
    'ql-font':'字体',
    'ql-code':'插入代码',
    'ql-italic':'斜体',
    'ql-link':'添加链接',
    'ql-background':'背景颜色',
    'ql-size':'字体大小',
    'ql-strike':'删除线',
    'ql-script':'上标/下标',
    'ql-underline':'下划线',
    'ql-blockquote':'引用',
    'ql-header':'标题',
    'ql-indent':'缩进',
    'ql-list':'列表',
    'ql-align':'文本对齐',
    'ql-direction':'文本方向',
    'ql-code-block':'代码块',
    'ql-formula':'公式',
    'ql-image':'图片',
    'ql-video':'视频',
    'ql-clean':'清除字体样式'
};

export function addQuillTitle(){
    const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select'),
        aSpan= oToolBar.querySelectorAll('span');
    aButton.forEach((item)=>{
        if(item.className === 'ql-script'){
            item.value === 'sub' ? item.title = '下标': item.title = '上标';
        }else if(item.className === 'ql-indent'){
            item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
        }else if(item.className === 'ql-list'){
            item.value==='ordered' ? item.title='有序列表' : item.title='无序列表'
        }else if(item.className === 'ql-header'){
            item.value === '1' ? item.title = '标题H1': item.title = '标题H2';
        }else{
            item.title = titleConfig[item.classList[0]];
        }
    });
    aSelect.forEach((item)=>{
        if(item.className!=='ql-color'&&item.className!=='ql-background'){
            item.parentNode.title = titleConfig[item.classList[0]];
        }
    });
    aSpan.forEach((item)=>{
        if(item.classList[0]==='ql-color'){
            item.title = titleConfig[item.classList[0]];
        }else if(item.classList[0]==='ql-background'){
            item.title = titleConfig[item.classList[0]];
        }
    });
}

//富文本编辑器工具栏选项
export const toolbarOptions=[
    ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'],                     //引用，代码块
    [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
    [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
    [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
    [{ 'direction': 'rtl' }],                         // 文字输入方向
    [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
    [{ 'color': [] }, { 'background': [] }],          // 颜色选择
    [{ 'font': [] }], // 字体
    [{ 'align': [] }],    // 居中
    ['clean'],            // 清除样式,
    ['link', 'image', 'video']  // 链接、上传图片、上传视频
];

//editorOptions中的modules
export const editorModules={
    toolbar: {
        container: toolbarOptions,
        handlers: {
            'image': (value) => {
                if (value) {
                    document.querySelector('.imgUpload input').click();
                } else {
                    this.quill.format('image', false);
                }
            }
        }
    },
    history: {
        delay: 1000,
        maxStack: 50,
        userOnly: false
    },
    imageDrop: true,
    imageResize: {
        //调整大小组件。
        displayStyles: {
            backgroundColor: 'black',
            border: 'none',
            color: 'white'
        },
        modules: ['Resize', 'DisplaySize', 'Toolbar']
    },
    imageExtend: {
        name: 'img',
        size: 10,
        action: '/saveImageToServer',
        headers: (xhr) => {

        },
        response: (res) => {
            console.log(res);
        }
    }
};